<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>地图数据展示 - Demo</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
    <style type="text/css">
        .info {
            border: solid 1px silver;
        }
        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }
        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }
        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }
        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }
        div.info-middle {
            font-size: 12px;
            padding: 6px;
            line-height: 20px;
        }
        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }
        div.info-bottom img {
            position: relative;
            z-index: 104;
        }
        span {
            margin-left: 5px;
            font-size: 11px;
        }
        .info-middle img {
            float: left;
            margin-right: 6px;
        }
        .amap-logo{
            display: none!important;
        }
        .amap-copyright{
            display: none!important;
        }
    </style>
</head>
<body>

<div class="container-fluid">
    <div class="row-fluid" style="padding-top: 30px">
        <div class="col-md-6" id="view1" style="height:650px">
        </div>
        <div class="col-md-6" id="view2" style="height:650px">
        </div>
    </div>
</div>

    
<div id="container" style="position: relative;height:600px; width: 100%;">
</div>



<!--<script src="https://webapi.amap.com/loca?key=17cc15a8dd6241aa1984495c67d70e6f"></script>-->
<script src="https://webapi.amap.com/maps?v=1.4.2&key=17cc15a8dd6241aa1984495c67d70e6f"></script>    
<script src="https://webapi.amap.com/js/marker.js"></script>
<script src="../js/data.js"></script>
<script language="JavaScript" src="../js/echarts.min.js"></script>
<script language="JavaScript" src="../js/jquery.min.js"></script>
<script language="JavaScript" src="../js/bootstrap.min.js"></script>
<script src="../js/hainan.js"></script>
<script src="../js/public.js"></script>


<script>
    var map = new AMap.Map('container', {
        mapStyle: 'amap://styles/normal',
        pitch: 50,
        zoom: 15,
        center: [110.354569,20.024504],
    });

    //构建自定义信息窗体
    function createInfoWindow(title, content) {
        var info = document.createElement("div");
        info.className = "info";

        //可以通过下面的方式修改自定义窗体的宽高
        //info.style.width = "400px";
        // 定义顶部标题
        var top = document.createElement("div");
        var titleD = document.createElement("div");
        var closeX = document.createElement("img");
        top.className = "info-top";
        titleD.innerHTML = title;
        closeX.src = "https://webapi.amap.com/images/close2.gif";
        closeX.onclick = closeInfoWindow;

        top.appendChild(titleD);
        top.appendChild(closeX);
        info.appendChild(top);

        // 定义中部内容
        var middle = document.createElement("div");
        middle.className = "info-middle";
        middle.style.backgroundColor = 'white';
        middle.innerHTML = content;
        info.appendChild(middle);

        // 定义底部内容
        var bottom = document.createElement("div");
        bottom.className = "info-bottom";
        bottom.style.position = 'relative';
        bottom.style.top = '0px';
        bottom.style.margin = '0 auto';
        var sharp = document.createElement("img");
        sharp.src = "https://webapi.amap.com/images/sharp.png";
        bottom.appendChild(sharp);
        info.appendChild(bottom);
        return info;
    }

    //关闭信息窗体
    function closeInfoWindow() {
        map.clearInfoWindow();
    }


    var markers = []; //province见Demo引用的JS文件
    var points = getPointReal();
    points.forEach(function(d){
        var marker;
        if (1) {
            var icon = new AMap.Icon({
                image: '../imgs/marker.png', //marker marker_red_sprite
                size: new AMap.Size(24, 24),
                imageSize: new AMap.Size(24, 24),
            });
            marker = new AMap.Marker({
                icon: icon,
                position: d[4].split(','),
                offset: new AMap.Pixel(-12, -12),
                zIndex: 101,
                title: d[1] + d[4],
                map: map
            });
        }
        markers.push(marker);


        //实例化信息窗体
        var title = d[1] + '<span style="font-size:11px;color:#F00;"> 测试</span>',
                content = [];
        content.push("<img src='https://tpc.googlesyndication.com/simgad/5843493769827749134'>详细地址：" + d[3]);
        content.push("商户代码：" + d[0]);
        content.push("商户状态：" + d[2]);
        content.push("可点击");
        var infoWindow = new AMap.InfoWindow({
            isCustom: true,  //使用自定义窗体
            content: createInfoWindow(title, content.join("<br/>")),
            offset: new AMap.Pixel(16, -45)
        });

        marker.on('click',function(e){
            infoWindow.open(map, e.target.getPosition());
        });


    });
    
    map.setFitView();

    drawMap("view1");
    drawMap2("view2");

    function drawMap(id){
        var map = echarts.getMap("海南");
        var data = map.geoJson.features.map(function(d){
            return { name: d.properties.name, value:parseInt(Math.random() * 500)};
        });
        var option = {
            title: {
                text: '海南省数据展示',
                textStyle: {
                    fontSize: 30
                },
                x: 'center'
            },
            tooltip: {
                show: true,
                formatter: function(params) {
                    return params.name + '：' + params.data['value'] + ''
                },
            },
            visualMap: {
                max: 500,
                left: 'left',
                top: 'bottom',
                text: ['', ''], // 文本，默认为数值文本
                calculable: true,
                inRange:{
                    color:['#ffffff','#d00000']
                }
            },
            series: [{
                name: '数据分布',
                type: 'map',
                map: '海南',
                roam: false,
                label: {
                    normal:{ show: true }
                },
                center: [109.844902, 19.0392],
                layoutCenter: ['50%', '50%'],
                layoutSize: "600%",
                data:data
            }]
        };

        Init3(option, id);
    }

    function drawMap2(id){
        $.get('../js/haikou.json', function(mapGeo){
            echarts.registerMap('海口', mapGeo);
            var data = mapGeo.features.map(function(d){
                return { name: d.properties.name, value:parseInt(Math.random() * 500)};
            });

            var option = {
                title: {
                    text: '海口市数据展示',
                    textStyle: { fontSize: 25},
                    x: 'center'
                },
                visualMap: {
                    max:500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'],
                    calculable: false,

                    inRange: {
                        color: ['#e0ffff', '#006edd'],
                        symbolSize: [30, 100]
                    }
                },
                tooltip: {
                    padding: 0,
                    enterable: true,
                    transitionDuration: 1,
                    textStyle: {
                        color: '#000',
                        decoration: 'none',
                    },

                },
                series: [{
                    name: '',
                    type: 'map',
                    mapType: '海口',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    label: { normal:{ show: true } },
                    data: data
                }]
            };
            Init3(option, id);
        });


    }

</script>
</body>
</html>